<template>
  <a-modal :open="visibleModal" title="设备码列表" width="600px" centered :footer="null" @ok="handleOk" @cancel="handleCancel">
    <div class="modal-wrap">
      <a-spin :spinning="loading" tip="数据加载中">
        <div class="list">
          <default-image v-if="!deviceCodeList.length" />
          <div
            v-for="(item, index) in deviceCodeList"
            v-else
            :key="index"
            class="px-16 list-item gap-x-6"
            :class="[index % 2 === 0 && 'active']"
          >
            <i class="iconfont icon-a-AIservice-line"></i>
            <div class="name elliptical-1" :title="item">
              {{ item }}
            </div>
            <i class="cursor-pointer iconfont icon-file-copy-line" title="复制设备码" @click="onCopyCode(item)"></i>
          </div>
        </div>
      </a-spin>
    </div>
  </a-modal>
</template>

<script setup lang="ts">
  import { message } from 'ant-design-vue'
  import { computed, ref } from 'vue'

  import DefaultImage from '@/components/DefaultImage/index.vue'
  import { copyText } from '@/utils/index'

  const visibleModal = ref(false)
  const loading = ref<boolean>(false)
  const detailId = ref<string>('')

  const detailInfo = ref<string[]>([])
  const deviceCodeList = computed(() => detailInfo.value || [])

  const openModal = () => {
    visibleModal.value = true
  }

  const handleCancel = () => {
    detailId.value = ''
    detailInfo.value = []
    visibleModal.value = false
  }
  const handleOk = () => {
    detailId.value = ''
    detailInfo.value = []
    visibleModal.value = false
  }

  const changeLoading = (val: boolean) => {
    loading.value = val
  }

  const setDetailInfo = (info: string[]) => {
    detailInfo.value = info
  }

  const onCopyCode = (code: string) => {
    copyText(code)
    message.success('复制成功')
  }

  defineExpose({
    changeLoading,
    setDetailInfo,
    openModal,
    handleCancel,
    handleOk
  })
</script>

<style lang="less" scoped>
  @import '@/styles/common.less';

  .list {
    overflow-x: hidden;
    overflow-y: auto;
    min-height: 50px;
    max-height: 500px;

    .list-item {
      display: flex;
      align-items: center;
      width: 100%;
      height: 56px;
      border-bottom: 1px solid @border1;

      &.active {
        background-color: @background2;
      }

      .name {
        max-width: 464px;
      }
    }
  }
</style>
